import React,{ useState,useEffect,useRef } from "react";
import HomeHeader from "../components/HomeHeader";
import _ from '../assets/utils'
import { Swiper,Image,Divider,DotLoading  } from 'antd-mobile'
import { Link } from 'react-router-dom'
import * as api from '../api/index'
import './Home.less'
import NewsItem from "../components/NewsItem";
import SkeletonAgain from "../components/SkeletonAgain";


const Home = function Home(){
    const [today,setToday] = useState(_.formatTime(null,'{0}{1}{2}')),
        [bannerData,setBannerData] = useState([]),
        [newsList,setNewsList] = useState([])
    let loadMore = useRef()
    useEffect(()=>{
        (async ()=>{
            try{
                let {date,stories,top_stories} = await api.queryNewsLatest()
                setToday(date)
                setBannerData(top_stories)

                newsList.push({
                    date,
                    stories
                })
                setNewsList([...newsList]) 
            }catch(e){}
        })()
    },[])
    useEffect(()=>{
        // console.log(loadMore.current);
        let ob = new IntersectionObserver(async changes => {
            //每次出现和离开都会触发此函数
            let { isIntersecting } = changes[0] //当出现则isIntersecting为true
            if(isIntersecting){
                //加载更多的按钮出现在视口中「也就是触底了」
                try{
                    let time = newsList[newsList.length-1]['date']-1
                    let res = await api.queryNews_before(time)
                    //console.log(res);
                    newsList.push(res)
                    setNewsList([...newsList])
                }catch(e){}
            }
        })
        ob.observe(loadMore.current)
        const loadMoreBox = loadMore.current

        return ()=>{
            ob.unobserve(loadMoreBox)
            ob = null
        }
    },[])

    return <div className="home-box">
        <HomeHeader today={today} />
        <div className="swiper-box">
            {bannerData.length > 0 ? <Swiper autoplay={true} loop={true}>
                {bannerData.map((item)=>{
                    let {id,image,title,hint} = item
                    return <Swiper.Item key={id}>
                    <Link to={{ pathname:`/detail/${id}` }}>
                        {/* <img src="https://pica.zhimg.com/v2-6e57b5abc8e3c231ce15c6d108648d41.jpg" alt="" /> */}
                        <img src={image} alt="" />
                        {/* <Image src={image} lazy /> */}
                        <div className="desc">
                            <h3 className="title">{title}</h3>
                            <p className="author">{hint}</p>
                        </div>
                    </Link>
                </Swiper.Item>
                })}
            </Swiper> : null}
        </div>
        {/* 新闻列表 */}
        {newsList.length > 0 ? newsList.map((item,index)=>{
            let {date,stories} = item
            
            return <div className="news-box" key={index}>
                {index !== 0 ? <Divider contentPosition='left'>{_.formatTime(date,'{1}月{2}日')}</Divider> : null}
                <div className="list">
                    {stories.map((cur,idx) =>{
                        return <NewsItem key={idx} info={cur}/>
                    })}
                </div>
            </div>
        }) : <SkeletonAgain />}
        {/* 加载更多 */}
        <div className="loadmore-box" ref={loadMore} style={{
            display: newsList.length === 0 ? 'none' : 'block'
        }}>
            <DotLoading />
            <span>数据加载中</span>
        </div>
    </div>
}
export default Home